<!--
 * @Description: 节点信息
 * @Author: wind-lc
 * @version: 1.0
 * @Date: 2021-11-09 10:20:17
 * @LastEditTime: 2023-06-19 16:45:00
 * @FilePath: \cscec-pms-admin\src\views\construction\contractor\nodeInfo.vue
-->
<template>
  <base-breadcrumb>
    <!-- 搜索 -->
    <searchData
      :search-data="searchOption1"
      @search="search"
    />
    <!-- 搜索 -->
    <!-- 表格 -->
    <a-card class="node-info-table">
      <a-spin :spinning="loading">
        <u-table
          v-if="height"
          ref="table"
          fixed-columns-roll
          :height="height"
          show-header-overflow
          row-id="id"
          :use-virtual="true"
          border
          index-config
        >
          <u-table-column
            type="index"
            width="80"
            label="序号"
            align="center"
          />
          <u-table-column
            v-for="item in columns3"
            :key="item.dataIndex"
            :prop="item.dataIndex"
            :label="item.title"
            :width="item.width"
            :fixed="item.fixed"
            align="center"
          >
            <template v-slot="{ row }">
              <!-- 前置任务 -->
              <div
                v-if="item.dataIndex === 'frontTask'"
                class="front-task"
                @mouseenter="handleCellMouseEnter($event,row)"
              >
                <span>{{ row[item.dataIndex] }}</span>
                <ul
                  class="front-task-info"
                  :style="{'top': row.top + 'px'}"
                >
                  <li
                    v-for="item in row.frontDetailList"
                    :key="item.id"
                  >
                    <b>前置节点：{{ item.frontTask }}</b>
                    <article>
                      <p>{{ item.type }}</p>
                      <section>
                        <span>{{ item.period }}天</span>
                        <span>{{ item.planStartTime }}-{{ item.planEndTime }}</span>
                      </section>
                      <section>
                        <i :class="color[item.statusLights]"></i>
                        <span>{{ item.desc }}</span>
                      </section>
                    </article>
                  </li>
                </ul>
              </div>
              <!-- 前置任务 -->
              <!-- 是否关键线路节点--是否垂直运输设备装拆 -->
              <a-switch
                v-else-if="['isKeyNode','isMilestonesNode','isMainProcessNode','isVerticalTransportNode','isContractDurationNode'].includes(item.dataIndex) && row.id"
                v-model="row[item.dataIndex]"
                checked-children="是"
                un-checked-children="否"
                disabled
              />
              <!-- 是否关键线路节点--是否垂直运输设备装拆 -->
              <span
                v-else
                :title="row[item.dataIndex]"
                class="node-info-table-item"
              >
                {{ row[item.dataIndex] }}
              </span>
            </template>
          </u-table-column>
        </u-table>
      </a-spin>
    </a-card>
    <!-- 表格 -->
    <div class="pub-header-btn page-btn-right-top">
      <a-button @click="$close">
        关闭
      </a-button>
    </div>
  </base-breadcrumb>
</template>
<script>
import { searchOption1, columns3 } from './model.js'
import contractor from '@/api/construction/contractor'
import { UTable, UTableColumn } from 'umy-ui'
export default {
  name: 'NodeInfo' + Date.now(),
  components: {
    UTable,
    UTableColumn
  },
  data() {
    return {
      // 搜索项
      searchOption1,
      // 查询参数
      searchData: {},
      // 表头
      columns3,
      // 表格数据
      tableData: [],
      // 内控计划
      loading: false,
      // 表格高度
      height: 0,
      // 可视区域高度
      clientHeight: 0,
      // 节点颜色
      color: {
        0: 'class-slider-0',
        1: 'class-slider-1',
        2: 'class-slider-2',
        3: 'class-slider-3',
        4: 'class-slider-4'
      },
      // 接口代码(只有内控计划的情况)
      apiCode: 0
    }
  },
  mounted() {
    this.height = document.querySelector('.node-info-table').offsetHeight - 21
    this.clientHeight = document.body.clientHeight
    this.loadData()
  },
  methods: {
    /**
     * @description: 搜索
     * @param {Object} value 搜索数据
     * @return {Void}
     */
    search(value) {
      this.searchData = value || {}
      this.loadData()
    },
    /**
     * @description: 表格数据加载
     * @param {void}
     * @return {void}
     */
    async loadData() {
      try {
        const { businessMatters } = this.searchData
        const { allLevel, level, projectId, isOverdue, isOnTimeFinish, isOverdueFinish, isOverdueNotFinish } = this.$route.query
        let isOneNode, isTwoNode, isThreeNode
        if (allLevel + '' === 'true') {
          isOneNode = true
          isTwoNode = true
          isThreeNode = true
        } else {
          switch (level + '') {
            case '1':
              isOneNode = true
              break
            case '2':
              isTwoNode = true
              break
            case '3':
              isThreeNode = true
              break
          }
        }
        this.loading = true
        const { code, data } = await contractor.nodeList({
          businessMatters,
          projectId: projectId + '',
          isOneNode,
          isTwoNode,
          isThreeNode,
          isOverdue: isOverdue + '' === 'true',
          isOnTimeFinish: isOnTimeFinish + '' === 'true',
          isOverdueFinish: isOverdueFinish + '' === 'true',
          isOverdueNotFinish: isOverdueNotFinish + '' === 'true'
        })
        if (code === 200) {
          this.reloadData([...data,{}])
        } else {
          this.reloadData([])
        }
        this.loading = false
      } catch (error) {
        console.log(error)
        this.reloadData([])
        this.loading = false
      }
    },
    /**
     * @description: 数据加载
     * @param {Array} data 数据
     * @return {void}
     */
    reloadData(data) {
      this.tableData = data
      this.$nextTick(()=>{
        this.$refs.table.reloadData(this.tableData)
      })
    },
    /**
     * @description: 单元格鼠标移入
     * @param {event} e 鼠标事件对象
     * @param {object} row 行数据
     * @return {void}
     */
    handleCellMouseEnter(e, row) {
      let height = this.clientHeight - (e.clientY - e.offsetY + 380)
      for (let i = 0; i < this.tableData.length; i++) {
        if (this.tableData[i].id === row.id) {
          if (height < 0) {
            this.tableData[i].top =  height - 40
          } else {
            this.tableData[i].top = 0
          }
          break
        }
      }
      this.$refs.table.reloadData(this.tableData)
    },
    /**
     * @description: 查看
     * @param {object} row 行数据
     * @return {void}
     */
    handleDetail(row) {
      if (row.maintainButton === 0) {
        // 节点开始
        this.handleNodeStart(row, 'detail')
      } else {
        // 节点完成
        this.handleNodeMaintain(row, 'detail')
      }
    }
  }
}
</script>
<style lang="less" scoped>
@deep: ~'>>>';
.node-info-table {
  height: calc(100% - 82px);
  margin-bottom: 0;
}
@{deep} .node-info-table .plTableBox .el-table .cell {
  overflow: inherit;
  white-space: normal;
}
@{deep} .node-info-table .el-table__fixed-body-wrapper {
  background-color: #fff;
}
.node-info-table-item {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  display: block;
}
.front-task {
  > span {
    overflow: hidden;
    text-overflow: ellipsis;
    word-break: break-all;
    white-space: nowrap;
    display: block;
  }
  &:hover {
    .front-task-info {
      display: block;
    }
  }
}
.front-task-info {
  position: absolute;
  width: 490px;
  max-height: 360px;
  z-index: 1;
  right: -480px;
  display: none;
  border-radius: 4px;
  box-shadow: rgba(0, 0, 0, 0.15) 0px 0px 20px;
  background-color: #fff;
  padding: 20px;
  overflow-x: hidden;
  overflow-y: auto;
  margin: 0;
  &::-webkit-scrollbar {
    width: 8px;
    height: 8px;
  }
  &::-webkit-scrollbar-thumb {
    /*滚动条里面小方块*/
    width: 8px;
    border-radius: 8px;
    background: #ccc;
  }
  li {
    text-align: left;
    margin-bottom: 10px;
    cursor: pointer;
    b {
      font-weight: normal;
    }
    article {
      border: 1px solid #e8e8e8;
      border-radius: 4px;
      padding: 1em;
      margin-top: 1em;
      white-space: normal;
      p {
        margin: 0;
      }
      section {
        margin-top: 5px;
        display: flex;
        align-items: center;
        span {
          margin-left: 10px;
        }
        span:nth-of-type(1) {
          margin-left: 0;
        }
        i {
          display: inline-block;
          width: 24px;
          height: 14px;
          margin-right: 10px;
        }
        b {
          margin-left: auto;
          font-weight: normal;
          display: flex;
          align-items: center;
          span{
            display: flex;
            align-items: center;
            margin: 0;
          }
          i {
            display: inline-block;
            width: 1px;
            height: 14px;
            background-color: #1890ff;
            margin: 0 5px;
          }
        }
      }
    }
  }
  li:nth-last-of-type(1) {
    margin-bottom: 0;
  }
}
</style>

